import { useState } from 'react';

/*
  学习目标：复用组件逻辑的三种方式 - HOC- 高阶组件
  HOC: 是一个函数,  接收一个组件 ,返回一个组件
    1. 💥函数内部封装一个组件, 组件内实现逻辑
    2. 接收一个组件, 通过父传子, 传递复用的逻辑
    3. 返回这个包装后的组件

*/
export function logMouse(Xxx) {
  return function Mouse(params) {
    const [mouse, setMouse] = useState({ x: 0, y: 0 });
    const handleMouseMove = (e) => {
      setMouse({ x: e.clientX, y: e.clientY });
    };
    return <Xxx mouse={mouse} handleMouseMove={handleMouseMove}></Xxx>;
  };
}
